<template>
  <div>
    <a
      href="javascript:;"
      @click="skipRouter({path:'/preDetails',query:{recordId:item.recordId}})"
      v-for="(item,index) in list"
      :key="index"
      class="PersonList-content-list van-hairline--bottom"
    >
      <img :src="imgUrl+item.titleImage" alt />
      <div class="right">
        <div class="name van-ellipsis van-recordName">{{item.recordName}}</div>
        <div class="work van-ellipsis">职位：{{item.profession}}</div>
        <div class="txt van-multi-ellipsis--l2">{{item.individualResume}}</div>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  name: 'personRecordItem',
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      imgUrl: config.imgUrl,
    }
  },
  methods: {
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
  },
}
</script>
<style lang="scss">
@import '@/assets/css/base';
.PersonList-content-list {
  width: 100%;
  // height: px2rem(224);
  display: flex;
  box-sizing: border-box;
  padding: px2rem(28) px2rem(44) px2rem(25) px2rem(30);
  & > img {
    width: px2rem(172);
    height: px2rem(230);
    border-radius: px2rem(5);
    display: block;
    margin-right: px2rem(30);
    border-radius: px2rem(16);
    object-fit: cover;
  }
  & > .right {
    width: px2rem(408);
    height: px2rem(171);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > .name {
      font-weight: bold;
      font-size: px2rem(28);
      color: #312d2d;
    }
    & > .work {
      font-size: px2rem(24);
      color: #999;
    }
    & > .txt {
      font-size: px2rem(26);
      line-height: px2rem(33);
      color: #666;
    }
  }
}
</style>